<template>
  <div>
    <el-row class="info__avatar">
      <el-col :span="20">
        <img :src="avatar" class="avatar" />
      </el-col>
      <el-col :span="4">
        <el-button @click="toggleShow">上传新头像</el-button>
        <client-only>
          <my-upload
            v-model="show"
            field="img"
            :width="180"
            :height="180"
            url="/api/user/avatar"
            img-format="jpg"
            @crop-success="cropSuccess"
            @crop-upload-success="cropUploadSuccess"
            @crop-upload-fail="cropUploadFail"
          ></my-upload>
        </client-only>
      </el-col>
    </el-row>
    <el-row class="infor">
      <el-col :span="4">用户ID：</el-col>
      <el-col :span="20">{{ user.id }}</el-col>
    </el-row>
    <el-divider></el-divider>
    <el-row class="infor">
      <el-col :span="4">昵称：</el-col>
      <el-col :span="16">{{ user.name }}</el-col>
      <el-col :span="4">
        <el-button @click="changeName">修改昵称</el-button>
      </el-col>
    </el-row>
    <el-divider></el-divider>
    <el-row class="infor">
      <el-col :span="4">性别：</el-col>
      <el-col :span="16">{{
        user.sex === '1' ? '男' : user.sex === '0' ? '女' : '未知'
      }}</el-col>
      <el-col :span="4">
        <el-button @click="changeSex">修改性别</el-button>
      </el-col>
    </el-row>
    <el-divider></el-divider>
    <el-row class="infor">
      <el-col :span="4">绑定邮箱：</el-col>
      <el-col :span="20">{{ user.email | emailHidden }}</el-col>
    </el-row>
  </div>
</template>

<script>
import myUpload from 'vue-image-crop-upload/upload-2.vue'
export default {
  components: {
    myUpload
  },
  filters: {
    emailHidden(value) {
      const indexAt = value.indexOf('@')
      return `${value.slice(0, 4)}********${value.slice(indexAt)}`
    }
  },
  data() {
    return {
      show: false,
      imgDataUrl:
        'https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png'
    }
  },
  computed: {
    user() {
      return this.$store.state.user
    },
    avatar() {
      return this.$store.getters['user/avatar']
    }
  },
  methods: {
    toggleShow() {
      this.show = !this.show
    },
    /**
     * crop success
     *
     * [param] imgDataUrl
     * [param] field
     */
    cropSuccess(imgDataUrl, field) {},
    /**
     * upload success
     *
     * [param] jsonData   服务器返回数据，已进行json转码
     * [param] field
     */
    cropUploadSuccess(jsonData, field) {
      const self = this
      if (jsonData.code === 1) {
        const url = jsonData.data
        this.imgDataUrl = url
        this.$store.dispatch('user/setAvatar', {
          axios: self.$axios,
          data: url
        })
      }
    },
    /**
     * upload fail
     *
     * [param] status    server api return error status, like 500
     * [param] field
     */
    cropUploadFail(status, field) {},
    changeName() {
      const self = this
      this.$prompt('请输入新昵称', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        inputPattern: /\w{5}/,
        inputErrorMessage: '昵称格式不正确'
      })
        .then(({ value }) => {
          self.$store.dispatch('user/setName', {
            axios: self.$axios,
            data: value
          })
          this.$message({
            type: 'success',
            message: '你的新昵称是: ' + value
          })
        })
        .catch(() => {
          this.$message({
            type: 'info',
            message: '取消输入'
          })
        })
    },
    changeSex() {
      const self = this
      this.$prompt('请输入新性别', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        inputPattern: /0|1|2/,
        inputErrorMessage: '性别格式不正确'
      })
        .then(({ value }) => {
          self.$store.dispatch('user/setSex', {
            axios: self.$axios,
            data: value
          })
          this.$message({
            type: 'success',
            message: '你的新性别是: ' + value
          })
        })
        .catch(() => {
          this.$message({
            type: 'info',
            message: '取消输入'
          })
        })
    }
  }
}
</script>

<style lang="scss" scoped>
$inforMargin: 30px;
.infor {
  margin-top: $inforMargin;
  height: 40px;
  @include font(16px);
}
.info__avatar {
  height: 180px;
  /deep/ input[type='range'] {
    &::-webkit-slider-thumb {
      background-color: lighten($--color-primary, 10) !important;
    }

    &::-moz-range-thumb {
      background-color: lighten($--color-primary, 10) !important;
    }

    &::-ms-thumb {
      background-color: lighten($--color-primary, 10) !important;
    }
    &::-webkit-slider-runnable-track {
      background-color: rgba($--color-primary, 0.3) !important;
    }

    &::-moz-range-track {
      background-color: rgba($--color-primary, 0.3) !important;
    }

    &::-ms-fill-lower {
      background-color: rgba($--color-primary, 0.3) !important;
    }

    &::-ms-fill-upper {
      background-color: rgba($--color-primary, 0.15) !important;
    }

    &:focus {
      &::-webkit-slider-runnable-track {
        background-color: rgba($--color-primary, 0.5) !important;
      }

      &::-moz-range-track {
        background-color: rgba($--color-primary, 0.5) !important;
      }

      &::-ms-fill-lower {
        background-color: rgba($--color-primary, 0.45) !important;
      }

      &::-ms-fill-upper {
        background-color: rgba($--color-primary, 0.25) !important;
      }
    }
  }
  /deep/ .vicp-wrap a {
    color: $--color-primary !important;
  }
  /deep/ .vicp-success {
    color: $--color-primary !important;
  }
  /deep/ .vicp-icon3::after {
    border-color: $--color-primary !important;
  }
}
/deep/ .el-divider {
  margin: $inforMargin 0px;
}
.avatar {
  display: block;
  border-radius: 50%;
  width: 180px;
  height: 180px;
  object-fit: cover;
}
.el-col {
  height: 100%;
  @include flexCenter($jc: flex-start);
}
</style>
